<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/view/include/css-include.jsp"%>
<%@ include file="/view/include/jsp-include.jsp"%>
<%@ include file="/view/include/jquery-include.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	$().ready(function() { 
		view(1);   
		$("#onWrite").bind("click",function(){
            location="/customerWrite.html";            
        });
	    /* 조회버튼 */
	    $("#btnSearch").bind("click",function(){       
	    	view(1);
	    });
	    
	});

	function view(page){
		$.post(
                '/getCustomerView.json', {                      
                paging : page,//odrNo,
                listScale : "15",
                custDiv : $("#custDiv").val(),
                custName : $("#custName").val(),
                nation : $("#nation").val(),
                custCode : $("#custCode").val()
               },
            function(data) {
                //$("#customerDetail").remove();
                //reSetValidete(); //벨류데이션 초기화
                searchDataMaping(data);    //DATA맵핑 
            });
	}
	
	/* searchData 맵핑 */
    function searchDataMaping(data){
    	   
    	var contents = "";
        var cHeader = "<tr>"
        	+"<th width='65px'>Div</th>"
        	+"<th width='65px'>Code</th>"
        	+"<th width='100px'>Name</th>"
        	+"<th width='100px'>Nation</th>"
        	+"<th width='100px'>ContactPerson</th>"                      
        	+"<th width='*'>Address</th>"
        	+"<th width='100px'>Telephone</th>"
        	+"<th width='20px'>U</th>"
        	+"<th width='20px'>D</th>"
        	+"</tr>";
        if(data.resultList.length == 0){
            contents = "<tr><td colspan='9' height='50' bgcolor='#FFFFFF' align='center'><B>No Data</B></td></tr>";
            $("#customerDetail").html(cHeader+contents);
                
        }else{  
        	var tdTmp = "";
	        $.each(data.resultList, function(index){  // List로 받아온값 (여러건)  
	        	if(this.cnt == 0){
                    tdTmp = "<td align='center'><a href='javascript:onDel(\""+this.custCode+"\");'><img src='images/web/ic_x.gif' alt='Delete' id='onDelete'/></a></td>"
                }else{
                    tdTmp = "<td align='center'></td>"
                }
	           contents += "<tr style='cursor:pointer' onclick='rowSelect(this, \""+this.custCode+"\")'><td align='center'>"+this.custDivName+"</td>"
	        	   +"<td align='center'><a href='javascript:onDetail(\""+this.custCode+"\");'>"+this.custCode+"</a></td>"
	        	   +"<td align='left' class='boSub'>"+this.custName+"</td>"
	        	   +"<td align='left' class='boSub'>"+this.nation+"</td>"
	        	   +"<td align='left' class='boSub'>"+this.conPerson+"</td>"
	        	   +"<td align='left' class='boSub'>"+this.addr1 + this.addr2+"</td>"
	        	   +"<td align='left' class='boSub'>"+this.tel+"</td>"
	        	   +"<td align='center'><a href='javascript:onUpdate(\""+this.custCode+"\");'><img src='images/web/ic_up.gif' alt='Update' id='onUpdate'/></a></td>"
	               +tdTmp
	               +"</tr>";
	            
	        });
        }
        var totalPage = Math.ceil(parseInt(data.customeCount)/parseInt(15));        
        $("#spanCount").empty().html("Total : "+data.customeCount);
        $("#pageCount").empty().html("Page : "+$("#pageNum").val()+" / "+totalPage);                    
        $("#page").empty().html(data.pageSplit);
        
        $("#customerDetail").html(cHeader+contents);  // 조회 값 뿌리기
        $("#customerDetail tr:eq(1)").click(); 
        
    }
    
    function onUpdate(arg){
    	//alert(arg);
    	location="/customerUpdate.html?custCode="+arg;
    }

    function onDetail(arg){
    	//alert(arg);
        location="/customerDetail.html?custCode="+arg;
    }

    function onDel(arg){
    	//alert(argCustCode);
    	$.post(
                '/delCustomer.json', {  
                custCode : arg
               },
            function(data) {
           	   if(data.result == true){
                   alert("Deleted.....!");
                   view($("#pageNum").val());    
           	   }else{
           		   alert("ERROR!");
           	   }  
            });
    }

    function ajaxPageSplit(num) {
    	$("#pageNum").val(num);
        view(num);
    }
    
    var custCodeTmp = "";
    function rowSelect(obj, custCode){
    	custCodeTmp = custCode;
    	$("#customerDetail tr").css("backgroundColor","#FFFFFF");
        obj.style.backgroundColor="#e0eeee";  
        document.ondblclick=dblclick;
    }

    function dblclick(){
    	onUpdate(custCodeTmp);
    }
</script>
</head>
<body>
<div class="wrap">
	<div class="pagetitle">
    	<h1>SHIPPER AND CUSTOMER</h1>
	</div>
    <div>
    	<table class="TableST">
            <tr>
            	<th>Customer Code</th>
                <td>
                	<input type="text" class="inST" name="custCode" id="custCode"/>
                </td>
                <th>Customer Name</th>
                <td>
                	<input type="text" class="inST" name="custName" id="custName"/>
                </td>
            </tr>
            <tr>
            	<th>Nation</th>
                <td>
                	<input type="text" class="inST" name="nation" id="nation"/>
                </td>
                <th>Customer Division</th>
                <td>
                    <select name="custDiv" id="custDiv">
                        <option value="">all</option>
                        <option value="1">Shipper</option>
                        <option value="2">Messrs</option>
                        <option value="3">End user</option>           
                    </select>
                    
                </td>
            </tr>
        </table>
        <div class="bo_btnS">
	        <ul class="btnst"><li class="a"><a href="#" id="btnSearch" >SEARCH</a></li></ul>
	    </div>
        <br/><br/><br/><br/>
        <ul>
        	<li class="totaltext"><span id="spanCount">Total : 0</span></li>
            <li class="pagetext"><span id="pageCount">Page : 1&frasl;1</span></li>
            <li class="bolistW">
            	<table class="TableST4" id="customerDetail">
                	<!-- tr>
                    	<th width="65px">Div</th>
                        <th width="65px">Code</th>
                        <th width="100px">Name</th>
                        <th width="100px">Nation</th>
                        <th width="100px">ContactPerson</th>                        
                        <th width="*">Address</th>
                        <th width="100px">Telephone</th>
                        <th width="20px">U</th>
                        <th width="20px">D</th>
                    </tr>
                    <span id="customerDetail">
                        <tr>
                           <td colspan="9"></td>    
                        </tr>
                    </span-->                    
                </table>
            </li>
        </ul>
    </div>
    <!--<div class="padeNum">
    <a href="#"><img src="images/web/icon_navi_01.gif" /></a>1.2.3.4.5.6.7<a href="#"><img src="images/web/icon_navi_02.gif" /></a>
    </div>
    -->
    <div class="page_wrap">
        <div class="page" id="page" >
        </div>
    </div>
    <div class="bo_btn">
        <ul class="btnst"><li class="a"><a href="#" id="onWrite" >INSERT</a></li></ul>
    </div>
    <input type="hidden" name="pageNum" id="pageNum" value="1">
</div>
</body>
</html>